<template>
  <div class="user-container">
    <el-col :span="24">
      <div class="filter-container">
        <el-input
          v-model="userForm.username"
          clearable
          size="mini"
          placeholder="用户名"
          style="width: 100px;"
          class="filter-item"
        />
        <el-input
          v-model="userForm.phone"
          clearable
          size="mini"
          placeholder="手机号"
          style="width: 150px;"
          class="filter-item"
        />
        <el-input
          v-model="userForm.email"
          clearable
          size="mini"
          placeholder="邮箱"
          style="width: 150px;"
          class="filter-item"
        />
        <!--<el-select
          v-model="userForm.sex"
          clearable
          size="mini"
          class="filter-item"
          placeholder="性别"
          style="width: 80px;"
        >
          <el-option v-for="item in sexType" :key="item.key" :label="item.value" :value="item.key" />
        </el-select>-->
        <el-select
          v-model="userForm.status"
          clearable
          size="mini"
          class="filter-item"
          placeholder="状态"
          style="width: 100px;"
        >
          <el-option
            v-for="item in statusType"
            :key="item.key"
            :label="item.value"
            :value="item.key"
          />
        </el-select>
        <el-date-picker
          v-model="value1"
          style="width: 300px;"
          size="mini"
          type="daterange"
          range-separator="至"
          start-placeholder="创建"
          end-placeholder="日期"
        />
        <el-button
          v-waves
          circle
          size="mini"
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter"
        />
        <el-button
          v-waves
          circle
          size="mini"
          class="filter-item"
          type="primary"
          icon="el-icon-edit"
          @click="openEditUserDialog(null,null)"
        />
        <el-button
          v-waves
          circle
          size="mini"
          class="filter-item"
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click="openAddUserDialog"
        />
        <el-button
          v-waves
          circle
          size="mini"
          class="filter-item"
          type="warning"
          icon="el-icon-circle-check"
          @click="handleFilter"
        />
        <el-button
          v-waves
          circle
          size="mini"
          class="filter-item"
          type="warning"
          icon="el-icon-circle-close"
          @click="handleFilter"
        />
        <el-button
          v-waves
          circle
          size="mini"
          class="filter-item"
          type="danger"
          icon="el-icon-delete"
          @click="handleFilter"
        />
        <el-divider />
      </div>
      <el-table ref="filterTable" :data="tableData" tooltip-effect="dark" border>
        <el-table-column type="selection" width="55" />
        <el-table-column prop="username" label="用户名" min-width="10%" />
        <el-table-column prop="phone" min-width="15%" label="手机号码" />
        <el-table-column prop="email" min-width="20%" label="邮箱地址" />
        <el-table-column prop="sex" min-width="8%" label="性别" />
        <el-table-column prop="createdTime" min-width="20%" label="创建日期" />
        <el-table-column prop="status" min-width="10%" label="状态" />

        <el-table-column fixed="right" min-width="30%" label="操作">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="light" content="查看" placement="bottom">
              <el-button
                circle
                size="mini"
                type="primary"
                icon="el-icon-info"
                @click="openUserDialog(scope.$index, scope.row)"
              />
            </el-tooltip>
            <el-tooltip class="item" effect="light" content="编辑" placement="bottom">
              <el-button
                circle
                size="mini"
                type="primary"
                icon="el-icon-edit"
                @click="openEditUserDialog(scope.$index, scope.row)"
              />
            </el-tooltip>
            <el-tooltip class="item" effect="light" content="启用禁用" placement="bottom">
              <el-button
                size="mini"
                circle
                type="warning"
                @click="updateUser(scope.$index, scope.row)"
              >启
              </el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="light" content="删除" placement="bottom">
              <el-button
                circle
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="deleteUser(scope.$index, scope.row)"
              />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        :title="textMap[editOrCreate]"
        :visible.sync="editUserDialog"
        width="40%"
        :before-close="handleClose"
      >
        <el-form
          ref="userForm1"
          :rules="rules"
          :model="userForm"
          size="mini"
          label-position="right"
          label-width="70px"
          style="width: 400px; margin-left:50px;"
        >
          <el-row :span="24">
            <el-col :span="10">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="userForm.username" :span="12" />
              </el-form-item>
            </el-col>
            <el-col :span="4" />
            <el-col :span="10" push="3">
              <el-form-item label="姓名" prop="fullname">
                <el-input v-model="userForm.fullname" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="密码" prop="username">
                <el-input v-model="userForm.password" show-password />
              </el-form-item>
            </el-col>
            <el-col :span="4" />
            <el-col :span="10" push="3">
              <el-form-item label="状态" prop="username">
                <!-- <el-select v-model="userForm.status" class="filter-item" placeholder="请选择">
                   <el-option v-for="item in statusType" :key="item.key" :label="item.value" :value="item.key"/>
                </el-select>-->
                <el-switch
                  v-model="userForm.status"
                  active-color="#13ce66"
                  active-value="ENABLE"
                  inactive-color="#ff4949"
                  inactive-value="DISABLED"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item label="手机" prop="username">
                <el-input v-model="userForm.phone" />
              </el-form-item>
            </el-col>
            <el-col :span="4" />
            <el-col :span="10" push="3">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="userForm.email" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="昵称" prop="username">
                <el-input v-model="userForm.nickname" />
              </el-form-item>
            </el-col>
            <el-col :span="4" />
            <el-col :span="10" push="3">
              <el-form-item label="性别" prop="username">
                <el-select v-model="userForm.sex" class="filter-item" placeholder="请选择">
                  <el-option
                    v-for="item in sexType"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="生日" prop="birthday">
                <el-date-picker
                  v-model="userForm.birthday"
                  align="left"
                  type="date"
                  placeholder="选择日期"
                  :picker-options="pickerOptions"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="editUserDialog = false">取 消</el-button>
          <el-button
            size="mini"
            type="primary"
            @click="editOrCreate==='create'?submitAddUser():submitEditUser()"
          >确 定</el-button>
        </span>
      </el-dialog>
    </el-col>
  </div>
</template>

<script>
import { getUserAll, deleteUser } from '@/api/user'
import Dashboard from '../../dashboard/index'
import { editUser, addUser } from '../../../api/user'

const sexType = [
  { key: '男', value: '男' },
  { key: '女', value: '女' }
]
const statusType = [
  { key: 'ENABLE', value: '启用' },
  { key: 'DISABLED', value: '禁用' }
]
export default {
  name: 'Index',
  components: { Dashboard },
  data() {
    return {
      rules: null,
      userForm: {
        username: undefined,
        fullname: undefined,
        password: 123456,
        nickname: undefined,
        phone: undefined,
        email: undefined,
        sex: undefined,
        birthday: undefined,
        status: 'ENABLE'
      },
      statusType,
      sexType,
      tableData: null,
      dialogVisible: false,
      // 用户编辑弹窗
      editUserDialog: false,
      editOrCreate: null,
      textMap: {
        update: '编辑用户',
        create: '创建用户',
        show: '查看用户'
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      value1: '',
      value2: ''
    }
  },
  created() {
    this.init()
  },
  methods: {
    handleFilter() {},
    init() {
      this.getUserAll()
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    getUserAll() {
      console.log('-----------------------------------------')
      getUserAll().then((res) => {
        console.log(res.result)
        this.tableData = res.result
      })
    },
    submitEditUser() {
      editUser(this.userForm).then((res) => {
        if (res.success) {
          this.$message({
            showClose: true,
            message: '更新成功',
            center: true,
            type: 'success'
          })
          this.editUserDialog = false
        }
      })
    },
    submitAddUser() {
      addUser(this.userForm).then((res) => {
        if (res.success) {
          this.$message({
            showClose: true,
            message: '添加成功',
            center: true,
            type: 'success'
          })
          this.editUserDialog = false
          this.userForm
        }
      })
    },
    // 打开查看弹窗
    openUserDialog(index, row) {
      this.userForm = Object.assign({}, row) // copy obj
      this.userForm.timestamp = new Date(this.userForm.timestamp)
      this.editOrCreate = 'show'
      this.editUserDialog = true
      // this.$nextTick(() => {
      //   this.$refs['dataForm'].clearValidate()
      // })
    },
    // 打开编辑弹窗
    openEditUserDialog(index, row) {
      this.userForm = Object.assign({}, row) // copy obj
      this.userForm.timestamp = new Date(this.userForm.timestamp)
      this.editOrCreate = 'update'
      this.editUserDialog = true
      // this.$nextTick(() => {
      //   this.$refs['dataForm'].clearValidate()
      // })
    },
    // 打开新增弹窗
    openAddUserDialog() {
      this.userForm.timestamp = new Date(this.userForm.timestamp)
      this.editOrCreate = 'create'
      this.editUserDialog = true
      // this.$nextTick(() => {
      //   this.$refs['dataForm'].clearValidate()
      // })
    },
    deleteUser(index, row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteUser(row.id).then((res) => {
            if (res.success) {
              this.$message({
                showClose: true,
                message: '删除成功',
                center: true,
                type: 'success'
              })
            } else {
              this.$message({
                showClose: true,
                message: '删除失败',
                center: true,
                type: 'error'
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            showClose: true,
            type: 'info',
            center: true,
            message: '已取消删除'
          })
        })
    },
    resetDateFilter() {
      this.$refs.filterTable.clearFilter('date')
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter()
    },
    formatter(row, column) {
      return row.address
    },
    filterTag(value, row) {
      return row.sex === value
    },
    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] === value
    }
  }
}
</script>

<style lang="scss" scoped>
  .user {
    &-container {
      margin: 20px;
    }

    &-text {
      font-size: 20px;
      line-height: 30px;
    }
  }
</style>
